<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const timeRange = ref('week');
const stepsChartRef = ref(null);
const exerciseTypeChartRef = ref(null);
const totalSteps = ref(48256);
const totalDistance = ref(32.5);
const totalCalories = ref(2850);
const totalDuration = ref(8.5);

const initCharts = () => {
  // 步数图表
  const stepsChart = echarts.init(stepsChartRef.value);
  stepsChart.setOption({
    tooltip: {
      trigger: 'axis',
      formatter: '{b}<br/>步数: {c}'
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value',
      name: '步数'
    },
    series: [{
      data: [6500, 7200, 8300, 7900, 8800, 10300, 8600],
      type: 'bar',
      barWidth: '60%',
      itemStyle: {
        color: '#409EFF'
      }
    }]
  });

  // 运动类型图表
  const exerciseTypeChart = echarts.init(exerciseTypeChartRef.value);
  exerciseTypeChart.setOption({
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c}次 ({d}%)'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center'
    },
    series: [{
      name: '运动类型',
      type: 'pie',
      radius: '70%',
      data: [
        { value: 12, name: '跑步' },
        { value: 8, name: '步行' },
        { value: 5, name: '骑行' },
        { value: 3, name: '游泳' },
        { value: 2, name: '健身' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  });

  window.addEventListener('resize', () => {
    stepsChart.resize();
    exerciseTypeChart.resize();
  });
};

const fetchData = () => {
  console.log('获取运动数据，时间范围:', timeRange.value);
};

onMounted(() => {
  initCharts();
  fetchData();
});
</script>

<template>
  <div class="exercise-stats-container">
    <div class="header">
      <h3>运动统计</h3>
      <el-select v-model="timeRange" size="small" @change="fetchData">
        <el-option label="本周" value="week" />
        <el-option label="本月" value="month" />
        <el-option label="本年" value="year" />
      </el-select>
    </div>

    <div class="charts">
      <div ref="stepsChartRef" class="chart" />
      <div ref="exerciseTypeChartRef" class="chart" />
    </div>

    <div class="stats-grid">
      <div class="stat-card">
        <div class="stat-title">总步数</div>
        <div class="stat-value">{{ totalSteps.toLocaleString() }}</div>
        <div class="stat-unit">步</div>
      </div>
      <div class="stat-card">
        <div class="stat-title">运动距离</div>
        <div class="stat-value">{{ totalDistance }}</div>
        <div class="stat-unit">公里</div>
      </div>
      <div class="stat-card">
        <div class="stat-title">消耗热量</div>
        <div class="stat-value">{{ totalCalories }}</div>
        <div class="stat-unit">千卡</div>
      </div>
      <div class="stat-card">
        <div class="stat-title">运动时长</div>
        <div class="stat-value">{{ totalDuration }}</div>
        <div class="stat-unit">小时</div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.exercise-stats-container {
  padding: 15px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.charts {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.chart {
  flex: 1;
  height: 250px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.stat-card {
  background: #f5f7fa;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
}

.stat-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.stat-unit {
  font-size: 12px;
  color: #909399;
}
</style>